<template>
  <div>
    <template v-for="(item, index) in provinces">
      <el-row class="mdd-site-row" :key="index" v-if="index % 2 == 0">
        <ElCol class="mdd-col" :span="12" v-if="item.areas.length > 0">
          <el-col class="mdd-site-title mar10" :span="5" :push="1">{{
            item.name
          }}</el-col>
          <el-col class="add_site-list mar10" :span="16" :push="1">
            <a href="javascript:void(0);" class="el-link" v-for="(item1, index1) in item.areas" :key="index1">{{
              item1
            }}</a>
          </el-col>
        </ElCol>
        <ElCol
          class="mdd-col"
          :span="12"
          v-if="
            index + 1 < provinces.length &&
            provinces[index + 1].areas.length > 0
          "
        >
          <el-col class="mdd-site-title mar10" :span="5" :push="1">{{
            provinces[index + 1].name
          }}</el-col>
          <el-col class="add_site-list mar10" :span="16" :push="1">
            <a
              href="javascript:void(0);"
              class="el-link"
              v-for="(item1, index1) in provinces[index + 1].areas"
              :key="index1"
              >{{ item1 }}</a
            >
          </el-col>
        </ElCol>
      </el-row>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["provinces"],
};
</script>
<style lang="scss" scoped>
.el-link {
  padding: 5px;
  color: #666;
  &:hover {
    color: #ff9d00;
    text-decoration: underline;
  }
}
.mdd-site-title {
  font-size: 18px;
}
.mdd-site-row {
  margin: 10px 0;
  border-bottom: 1px dotted #eeeeee;
}
/* .mdd-site-row .el-col{
    padding: 20px 0;
  } */
.mar10 {
  margin: 10px 0;
}
.mdd-col {
  padding: 5px 0;
}
/deep/ .el-link.el-link--default:hover {
  color: #ff9d00;
}
/deep/ .el-link.is-underline:hover:after {
  border-bottom: 1px solid #ff9d00;
}
</style>